import styled from 'styled-components'

export const HeaderCenterWrapper = styled.div`
	position: relative;
	display: flex;
	justify-content: center;
	height: 48px;

	.search {
		position: absolute;
		width: 300px;
		height: 48px;
		padding-left: 8px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 24px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		cursor: pointer;

		${props => props.theme.mixin.boxShadow};

		display: flex;
		align-items: center;
		justify-content: space-between;

		.search-content {
			font-weight: 700;
			padding: 0 16px;
		}

		.search-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			color: #fff;
			border-radius: 50%;
			margin-right: 10px;
			background-color: ${props => props.theme.color.primaryColor};
		}
	}

	.search-detail {
		position: relative;
		transform-origin: 50% 0;
		will-change: transform, opacity;

		.infos {
			position: absolute;
			top: 65px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	/* 切换动画 */
	.bar-enter {
		transform: scale(2.85714, 1.375), translateY(58px);
		opacity: 0;
	}
	.bar-enter-active {
		transform: scale(1), translateY(0);
		opacity: 1;
		transition: all 200ms ease;
	}
	.bar-exit {
		transform: scale(1), translateY(0);
		opacity: 0;
	}
	.bar-exit-active {
		transform: scale(2.85714, 1.375), translateY(58px);
		opacity: 0;
		transition: all 200ms ease;
	}

	.detail-enter {
		transform: scale(0.35, 0.727273), translateY(-100px);
		opacity: 0;
	}
	.detail-enter-active {
		transform: scale(1), translateY(0);
		opacity: 1;
		transition: all 200ms ease;
	}
	.detail-exit {
		transform: scale(1), translateY(0);
		opacity: 1;
	}
	.detail-exit-active {
		transform: scale(0.35, 0.727273), translateY(-58px);
		opacity: 0;
		transition: all 200ms ease;
	}
`
